<template>
  <u-tabbar
    class="tab-bar d-md-block d-lg-none"
    :value="state"
    :fixed="true"
    :placeholder="true"
    :safeAreaInsetBottom="true"
    @change="handleChange"
  >
    <!-- <u-tabbar-item :text="$t('app.bar.store')" icon="bag" name="store"></u-tabbar-item> -->
    <u-tabbar-item :text="$t('app.bar.home')" icon="home" name="app"></u-tabbar-item>
    <!-- <u-tabbar-item :text="$t('app.bar.chats')" icon="server-man" name="chats"></u-tabbar-item> -->
  </u-tabbar>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { navigateTo } from '@/utils/uni';
export default defineComponent({
  name: 'TabBar',
  props: {
    route: {
      type: String,
    },
  },
  setup(props) {
    const state = ref(props.route);

    const handleChange = (value: string) => {
      navigateTo(value);
    };

    return {
      state,
      handleChange,
    };
  },
});
</script>

<style lang="scss" scoped></style>
